<template>
  <div class="approval-idea">
    <el-timeline v-if="approvalIdeas && approvalIdeas.length > 0">
      <el-timeline-item v-for="item in approvalIdeas" :key="item.id" color="#0bbd87">
        <div class="node-title">
          <div class="node-name">{{ item.nodeName }} — {{ item.approverName }}</div>
          <div class="deliver-time">{{ item.deliverTime }}</div>
        </div>
        <el-form label-width="70px">
          <el-form-item label="是否同意">
            <status-tag :status-options="approveResultOptions" :status="item.approveResult"></status-tag>
          </el-form-item>
          <el-form-item label="签核内容">
            {{ item.approveIdea }}
          </el-form-item>
          <el-form-item class="idea-file" v-if="item.attachments && item.attachments.length > 0">
            <file-list :file-list="item.attachments" :editable="false"></file-list>
          </el-form-item>
        </el-form>
      </el-timeline-item>
    </el-timeline>
    <div v-else style="text-align: center;color: #909399">暂无审批意见</div>
  </div>
</template>

<script>
import FileList from "@/components/FileUpload/FileList";

export default {
  name: "ApproveIdea",
  components: {
    FileList
  },
  props: {
    approvalIdeas: {
      type: Array,
      default: () => []
    },
    approveResultOptions: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped lang="scss">
.approval-idea {
  & ::v-deep .el-timeline-item__tail {
    left: 7px;
  }

  & ::v-deep .el-timeline-item__node--normal {
    width: 18px;
    height: 18px;
  }

  & ::v-deep .el-form-item__content {
    margin-left: 70px !important;
  }

  .node-title {
    margin-bottom: 8px;

    .node-name {
      font-size: 16px;
      color: #303133;
      line-height: 26px;
    }
    .deliver-time {
      color: #909399;
      line-height: 22px;
    }
  }

  .idea-file {
    & ::v-deep .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>
